<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>lunbotu</title>

    <!-- Bootstrap -->
    <link href="static/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
    <link href="static/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <link rel="stylesheet" type="" href="static/fi/css/lunbo.css">

</head>

<body>

    <div class="bg">
        <img src="img/1.jpg">

        <div class="left-btn">
            &lt;
        </div>
        <div class="right-btn">
            &gt;
        </div>
        <ul>
            <li id="btn1">1
            </li>
            <li id="btn2">2
            </li>
            <li id="btn3">3
            </li>
        </ul>
    </div>
    <script src="static/juqury/jquery-3.2.1.js">
    </script>


    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="static/bootstrap-3.3.7/js/bootstrap.js"></script>
    <script src="static/fi/js/lunbo.js"></script>

    <script>
        // // var btnLeft = $(".left-btn");
        // // var img = $(".bg img");
        // // btnLeft.on("click", function(e) {
        // //     var imageName = $(img.src());
        // //     var arr = imageNae.split(".")
        // // })
        // var btnLeft = document.querySelector(".left-btn");
        // var img = document.querySelector(".bg img");
        // btnLeft.addEventListener("click", function(e) {

        //     var imageName = img.src;
        //     console.log(img.src);
        //     var arr = imageName.split(".");
        //     var indexArr = arr[arr.length - 2].split("/");
        //     console.log(indexArr);
        //     var index = indexArr[indexArr.length - 1];
        //     console.log(index);

        //     index = index - 1;
        //     if (index <= 0) {
        //         index = 3;
        //     }
        //     console.log(index);

        //     img.src = "img/" + index + ".jpg";
        // })

        // var btnRight = document.querySelector(".right-btn");
        // btnRight.addEventListener("click", function(e) {

        //         var imageName = img.src;
        //         console.log(img.src);
        //         var arr = imageName.split(".");
        //         var indexArr = arr[arr.length - 2].split("/");
        //         console.log(indexArr);
        //         var index = indexArr[indexArr.length - 1];
        //         console.log(index);


        //         index = Number(index) + 1;
        //         if (index >= 4) {
        //             index = 1;
        //         }
        //         console.log(index);


        //         img.src = "img/" + index + ".jpg";
        //     })
        //     // var btn1 = $("#btn1");
        //     // btn1.on("click", function(e) {
        //     //         img.src = "img/1.jpg";
        //     //     })
        // var btn1 = document.querySelector("#btn1")
        // btn1.addEventListener("click", function(e) {
        //     img.src = "img/1.jpg";
        // })
        // var btn2 = document.querySelector("#btn2")
        // btn2.addEventListener("click", function(e) {
        //     img.src = "img/2.jpg";
        // })
        // var btn3 = document.querySelector("#btn3")
        // btn3.addEventListener("click", function(e) {
        //     img.src = "img/3.jpg";
        // })
    </script>
    <script>
        $(function() {
            // $("#step-graph") 生成jquery对 象 
            //new jquery（）__proto__prototype

            var stepGraph = $("#step-graph").stepGraph({
                data: [{
                    content: 1
                }, {
                    content: 2
                }, {
                    content: 3
                }, {
                    content: 4
                }]
            })

            // $("#step-graph").stepGraph({
            //     data: [{ content: 1 }, { content: 2 }, { content: 3 }, { content: 4 }]
            // })

            // $("#step-graph").stepGraph({
            //     data: [{ content: 1 }, { content: 2 }, { content: 3 }, { content: 4 }]
            // })

            // $("#step-graph").stepGraph({
            //     data: [{ content: 1 }, { content: 2 }, { content: 3 }, { content: 4 }]
            // })


            var btnNext = $(".btn-next");
            var btnPri = $(".btn-pre");
            var index = 0;
            var jStep = $(".step");
            btnNext.on("click", function(e) {
                // stepGraph.next();
                stepGraph.stepGraph("next");
            })

            btnPri.on("click", function(e) {
                stepGraph.stepGraph("pri");
                // stepGraph.pri();
            })
        })
    </script>


</body>

</html>